<template>
  <div class="app-container">
    <checkRebate class="sel" @update="getWidthCheckList" @close="addDialogClose" v-if="checkDialogShow"></checkRebate>
    <el-form style="float:left">
      <el-form-item label="手机号" :label-width="formLabelWidth" class="input">
        <el-input v-model="phoneNum" placeholder="请输入手机号"></el-input>
      </el-form-item>
      <el-form-item label="时间查询" :label-width="formLabelWidth" class="input">
        <el-date-picker
          v-model="dateArr"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item>
    </el-form>
    <el-button type="primary" icon="el-icon-search" style="float:left;margin-left:10px" @click="getWidthCheckList">查询
    </el-button>
    <el-table :data="accountData" border style="width: 100%" class="couponTable">
      <el-table-column prop="withDrawCheckId" label="提现编号"  min-width="300" align="center"></el-table-column>
      <el-table-column prop="amount" label="审核状态"  min-width="100" align="center" >
        <template slot-scope="scope">
          <span>{{scope.row.checkStatus==='PASS'?'通过审核':scope.row.checkStatus==='FAILED'?'审核未通过':'等待审核'}}</span>
        </template>
      </el-table-column>


      <el-table-column prop="phoneNum" label="用户手机号"  min-width="150" align="center"></el-table-column>
      <el-table-column prop="realName" label="用户姓名"  min-width="100" align="center" ></el-table-column>
      <el-table-column prop="amount" label="提现金额"  min-width="100" align="center" ></el-table-column>
      <el-table-column prop="dateCreated" label="提现时间" min-width="200" align="center" ></el-table-column>
      <el-table-column prop="checkUserPhoneNum" label="复核员手机号"  min-width="150" align="center"></el-table-column>
      <el-table-column prop="checkUserName" label="复核员姓名"  min-width="150" align="center" ></el-table-column>
      <el-table-column prop="checkUserDesc" label="复核员备注" min-width="100"  width="200" align="center"></el-table-column>
      <el-table-column align="center" prop="created_at" label="操作" width="150" fixed="right">
        <template slot-scope="scope" v-if="scope.row.checkStatus !== 'PASS'">
          <el-button type="primary" size="small" @click="edit(scope)">修改</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="curPage"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="size">
      </el-pagination>
    </div>
  </div>
</template>
<script>
  import { withDrawCheckAll, withDrawCheckUpdStatus } from 'api/account'
  import moment from 'moment'
  import checkRebate from './checkDialog'
  export default {
    components: {
      checkRebate
    },
    data() {
      return {
        checkDialogShow: false,
        accountData: [],
        pageSize: 10,
        curPage: 1,
        size: 0,
        phoneNum: '',
        formLabelWidth: '120px',
        dateArr: []
      }
    },
    created() {
      this.getWidthCheckList()
    },
    methods: {
      edit(scope) {
        sessionStorage.setItem('withDrawCheckId', scope.row.withDrawCheckId)
        this.checkDialogShow = true
      },
      async updStatus() {
        const parm = {
          pageSize: this.pageSize,
          curPage: this.curPage - 1,
          phoneNum: this.phoneNum,
          queryStart: '',
          queryEnd: ''
        }
        if (this.dateArr == null || this.dateArr.length === 0) {
          console.log('aa')
        } else {
          parm.queryStart = moment(this.dateArr[0]).format('YYYY-MM-DD')
          parm.queryEnd = moment(this.dateArr[1]).format('YYYY-MM-DD')
        }
        try {
          let back = await withDrawCheckUpdStatus(parm)
          back = back.data
          if (back.resultCode === '200') {
            this.accountData = back.result
            this.size = back.size
          }
        } catch (err) {
          this.$alert('出错了' + err, '提示')
        }
      },
      addDialogClose() {
        console.log('will close addDialogClose 01 ' + this.checkDialogShow)
        this.checkDialogShow = false
        console.log('will close addDialogClose02 ' + this.checkDialogShow)
        this.getWidthCheckList()
      },
      async getWidthCheckList() {
        const parm = {
          pageSize: this.pageSize,
          curPage: this.curPage - 1,
          phoneNum: this.phoneNum,
          queryStart: '',
          queryEnd: ''
        }
        if (this.dateArr == null || this.dateArr.length === 0) {
          console.log('aa')
        } else {
          parm.queryStart = moment(this.dateArr[0]).format('YYYY-MM-DD')
          parm.queryEnd = moment(this.dateArr[1]).format('YYYY-MM-DD')
        }
        try {
          let back = await withDrawCheckAll(parm)
          back = back.data
          if (back.resultCode === '200') {
            this.accountData = back.result
            this.size = back.size
          }
        } catch (err) {
          this.$alert('出错了' + err, '提示')
        }
      },
      handleSizeChange(val) {
        this.pageSize = val
        this.getAccountList()
      },
      handleCurrentChange(val) {
        this.curPage = val
        this.getAccountList()
      }
    }
  }
</script>
<style scoped lang="scss">
  .block {
    margin-top: 20px;
    float: right;
  }

  .input {
    float: left;
  }
</style>
